<template>
  <div>
    <van-nav-bar title="订单记录" left-text="返回" right-text="新增+" left-arrow
                 @click-right="showPopup=true" @click-left="$router.push('/mine/stock')"/>
    <div :style="{ height: `${tableHeight}px` }">
      <van-cell-group inset v-for="(item, index) in tableData.datas" :key="index">
        <van-cell title="订单编号：">{{ item.hex_id }}</van-cell>
        <van-cell title="有效时间：">{{ toDateString(new Date(item.expired_at * 1000)) }}</van-cell>
        <van-cell title="板块列表：">{{ item.boards.join(',') }}</van-cell>
        <van-cell title="账单明细：">
          <template #label>
            <div v-for="item in item.detail">
              <van-divider/>
              <van-row>
                <van-col :span="4">
                  {{ item.title }}:
                </van-col>
                <van-col :span="20">
                  <span>￥{{ item.price.toFixed(2) }}</span>
                  <span> x </span>
                  <span>{{ item.quantity }}支</span>
                  <span> x </span>
                  <span>{{ item.days }}天</span>
                  <span> = </span>
                  <span>￥{{ item.amount.toFixed(2) }}</span>
                </van-col>
              </van-row>
            </div>
          </template>
        </van-cell>
        <van-cell title="总计金额：">
          <span v-if="item.original_amount > item.amount" class="original-price">￥{{ item.original_amount }}</span>
          <span v-else class="price">￥{{ item.original_amount }}</span>
        </van-cell>
        <van-cell v-if="item.original_amount > item.amount" title="折扣比例：">
          <span class="freed">{{ (item.amount / item.original_amount * 10).toFixed(1) }}折</span>
          <span>/</span>
          <span class="freed">￥{{ (item.amount - item.original_amount).toFixed(2) }}</span>
        </van-cell>
        <van-cell title="实付金额：">
          <span class="price">￥{{ item.amount }}</span>
        </van-cell>
        <van-nav-bar :border="false">
          <template #left>
            <van-button plain size="small" type="info" :disabled="item.state !== 'created'" @click="onDelete(item)">
              撤销订单
            </van-button>
          </template>
          <template #right>
            <van-button v-if="item.state === 'created'" plain size="small" type="danger"
                        @click="onPay(item)">跳转支付
            </van-button>
            <span v-else-if="item.state === 'completed'">已完成</span>
            <span v-else>已撤销</span>
          </template>
        </van-nav-bar>
      </van-cell-group>
    </div>
    <pager v-model="queryParams.page" :total="tableData.total" :limit="queryParams.limit"
           :count="tableData.datas.length" @change="load"/>
    <van-popup v-model="showPopup" position="bottom" :style="{ height: '80%' }">
      <order-form url="/china_stock/sector/obtain" @cancel="showPopup=false" @submit="onCreate"/>
    </van-popup>
  </div>
</template>

<script>
import {Dialog} from 'vant'
import {toDateString} from '@/utils'

export default {
  components: {
    CustomTable: () => import('@/components/CustomTable.vue'),
    OrderForm: () => import('@/components/OrderForm.vue'),
    Pager: () => import('@/components/Pager.vue')
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 98
    }
  },
  data() {
    return {
      queryParams: {
        page: 1,
        limit: 20,
        order_by: 'created_at',
        sort_direction: -1
      },
      tableData: {
        total: 0,
        datas: []
      },
      showPopup: false
    }
  },
  methods: {
    toDateString: toDateString,
    load() {
      this.$requests.post('/china_stock/record/obtain', this.queryParams).then(resp => {
        this.tableData = resp
      })
    },
    onCreate(form) {
      this.$requests.post('/china_stock/record/create', form).then(resp => {
        if (resp) {
          this.showPopup = false
          this.load()
        }
      })
    },
    onDelete(item) {
      Dialog.confirm({
        title: '提示',
        message: `是否撤销订单：${item.hex_id}`,
      }).then(() => {
        let payload = {
          hex_id: item.hex_id
        }
        this.$requests.post('/china_stock/record/delete', payload).then(resp => {
          if (resp.n) {
            this.load()
          }
        })
      })
    },
    onPay(item) {

    }
  },
  mounted() {
    this.load()
  }
}
</script>

<style scoped>
.original-price {
  text-decoration: line-through;
  color: #909399;
}

.freed {
  color: #07c160;
}

.price {
  color: #ee0a24;
}

.van-cell-group {
  margin: 10px;
}
.van-col {
  color: #ee0a24;
}
</style>
